<template>
  <div class="set">
    <el-dialog title="设置" :visible.sync="dialogTableVisible" :show-close="showclose" :close-on-click-modal="showclose">
       <el-row>
          <el-col :span="4"><span class="left">激活</span></el-col>
          <el-col :span="20">
            <div v-if="!activation">
              <el-input size="mini" v-model="regcode" placeholder="请输入激活码激活" class="input2"/>
              <el-button @click="submit" size="mini">提交</el-button>
              <span class="pl10">剩余{{ overdays }}天</span>
            </div>
            
            <span v-else>激活成功</span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4"><span class="left">清理备注</span></el-col>
          <el-col :span="20">
            <el-date-picker
              class="width150"
              v-model="selectvalue"
              size="mini"
              type="year"
              placeholder="选择年">
            </el-date-picker>
            <el-select class="width150" size="mini" v-model="currentMonth"  placeholder="请选择">
              <el-option
                  label="全部"
                  value="0">
                  </el-option>
              <el-option
                v-for="(item, i) in monthlist"
                :key="i"
                :label="item.lable"
                :value="item.value">
                </el-option>
            </el-select>
            <el-button size="mini" @click="clearselectdata">清理已选</el-button>

            <el-button size="mini" @click="cleardata">清理全部</el-button>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4"><span class="left">快捷键</span></el-col>
          <el-col :span="20"><el-input size="mini" @blur="closesetkey" @focus="opensetkey" readonly v-model="closekey" class="input"/>关闭窗口快捷键</el-col>
        </el-row>
    </el-dialog>
  </div>
</template>
<script>
import calendar from '@/utils/calendar.js'
import regCodeList from '@/utils/regCode.js'
import {nanoid} from 'nanoid'
export default {
  data() {
    return {
      closekey: 'ctrl+' + this.$store.state.app.closekey,
      dialogTableVisible: false,
      setkeystate: false,
      keylist:[],
      selectvalue: new Date(),
      monthlist: calendar.monthList,
      currentMonth: (new Date()).getMonth() + 1,
      regcode:'',
      activation: false,
      overdays: 30,
      showclose: true,
    }
  },
  watch:{
    '$store.state.app.closekey': function (newVal) { // plan1.0
        if (newVal) {
          this.closekey = `ctrl+${this.$store.state.app.closekey}`
        }
     },
  },
  mounted() {
    this.closekey = 'ctrl+'+ this.$store.state.app.closekey
    console.log(this.$store.state.app.closekey,'this.$store')
    document.addEventListener('keyup', ()=>{
      this.setkeystate = false
      this.keylist = []
    })
    if(localStorage.getItem('activesuccess')) {
      this.activation = true
    }
    this.computeDownDay()

  },
  methods: {
    computeDownDay() {
      let beginday = localStorage.getItem('countdown')
      let currentday = Date.parse(new Date())
      this.overdays = 30 - parseInt((currentday - Date.parse(beginday)) / (60 * 60 * 24 * 1000))
      if(this.overdays <= 0) {
         this.showclose = true
         this.dialogTableVisible = true
      }
    },
    submit() {
      // this.regcode
      let hasreg = regCodeList.some(item=> item == this.regcode)
      if(hasreg) {
        this.$message.success('激活成功')
        this.activation = true
        localStorage.removeItem('countdown') //清除倒计时
        localStorage.setItem('activesuccess',true)
      }else {
        this.$message.error('激活码无效')
      }

    },
    open() {
      this.dialogTableVisible = true
    },
    // setclosekey(e) {  //多键组合
    //   // console.log(e.key)
    //   this.keylist.push(e.key)
    //   if(this.setkeystate) {
    //     this.$store.dispatch('app/setCloseKey', this.keylist.join('+'))
    //     console.log(this.keylist, this.$store.state.app.closekey,'this.$store.state.app.closekey')
    //     this.closekey = this.keylist.join('+')
    //   }
    // },
    setclosekey(e) {
      if (this.setkeystate) {
        this.$store.dispatch('app/setCloseKey', e.key)
        this.closekey = "ctrl+" + e.key
      }
    },
    opensetkey() {
      this.closekey = '请设置快捷键'
      this.setkeystate = true
      document.addEventListener('keydown', this.setclosekey)
    },
    closesetkey() {
      // this.closekey = this.$store.state.app.closekey   //多键组合
      this.closekey = "ctrl+" + this.$store.state.app.closekey
    },
    cleardata() {
      localStorage.removeItem('messageList')
      this.$store.dispatch('app/setSlides',[])
    },
    clearselectdata() {
      // console.log(this.currentMonth,this.selectvalue.getFullYear(),this.$store.state.app.slides)
      let dataList = this.$store.state.app.slides
      let month = this.currentMonth < 10 ? "0"+ this.currentMonth.toString() : this.currentMonth.toString()
      let year = this.selectvalue.getFullYear()
      console.log(month,year)
      let arr = []
      if(month == '00'){
        arr = dataList.filter((item) => {
          return item.year != year
        })
      } else {
        arr = dataList.filter((item) => {
          return !item.months.includes(month) && item.year == year
        }).concat(dataList.filter((item) => {
          return item.year != year
        }))
      }
      this.$store.dispatch('app/setSlides', arr)
      localStorage.setItem('messageList',JSON.stringify(arr))
    }
  },
}
</script>
<style scope>
.pl10 {
  padding-left: 10px;
}
.width150 {
  width: 100px !important;
}
.v-modal {
  display: none !important;
}
.el-dialog {
  text-align: left;
}
.left {
  line-height: 40px;
}
.el-row {
  height: 40px;
  align-items: center;
  display: flex;
  margin-bottom: 15px;
}
.input {
  width: 120px;
  margin-right: 15px;
}
.input2 {
  width: 220px;
  margin-right: 15px;
}
</style>